<template>
    <div style="padding: 0 0 10px 0px; position: relative; ">

        <el-button-group v-if="onlyRight != true">
            <el-button v-if="show.add" size="mini" type="success" icon="el-icon-plus" @click="onAdd">新增</el-button>
            <el-button v-if="show.edit" size="mini" type="primary" icon="el-icon-edit" @click="onEdit">修改</el-button>
            <slot name="left"></slot>
            <el-button v-if="show.delete" size="mini" type="danger"  icon="el-icon-delete" @click="onDelete">删除</el-button>
        </el-button-group>

        <slot></slot>

        <div :style="style.right">

            <el-button-group style="float: left;">
                <el-button v-if="show.test" size="mini" type="danger" icon="el-icon-error" @click="test">测试</el-button>
                <el-button v-if="isShowQuery" size="mini" type="warning" icon="el-icon-search" @click="onQuery">查询</el-button>
            </el-button-group>
            <div style="clear:both;"></div>

        </div>

        <div style="clear:both;"></div>
    </div>
</template>

<script>
module.exports = {
    data: function() {
        return {
            style: {
                right: 'width:50%; position:absolute; top:0px; right:0px;'
            },
            // showGroup: false,
            show: {
                test: false
            },
            isShowQuery: true
        }
    },
    props: {
        auth: Array,
        hide: Array,
        onlyRight: Boolean
    },
    created: function() {
        console.log('按钮权限列表', JSON.stringify(this.auth));
        // if(this.auth.length > 0) {
        //     this.showGroup = true;
        // }
        var showTest = this.show.test;
        this.initByAuth();
        this.initByHide();
        this.initByListener();
        if(this.onlyRight) {
            this.style.right = "";
        }
        this.show.test = showTest;
    },
    methods: {
        initByAuth: function() {
            if(this.auth == null) {
                return;
            }
            if(this.auth.length == 0) {
                // 默认显示 add edit delete
                this.show = {
                    add: true, edit: true, delete: true
                };
            } else {
                // 根据获取 auth 判断按钮是否显示
                for(var i in this.auth) {
                    var button = this.auth[i];
                    this.show[button] = true;
                }
            }
        },
        initByHide: function() {
            // 根据 hide 字段判断是否显示
            for(var i in this.hide) {
                var button = this.hide[i];
                this.show[button] = false;
            }
        },
        initByListener: function() {
            // console.log("listeners", this.$listeners);
            var listens = [];
            for(var key in this.$listeners) {
                listens.push(key);
            }
            for(var key in this.show) {
                if(!Util.inArray(key, listens)) {
                    this.show[key] = false;
                }
            }
            if(!Util.inArray('query', listens)) {
                this.isShowQuery = false;
            }
        },
        onAdd: function() {
            this.$emit('add');
        },
        onEdit: function() {
            this.$emit('edit');
        },
        onDelete: function() {
            this.$emit('delete');
        },
        onQuery: function() {
            this.$emit('query');
        },
        test: function() {
            this.$emit('test');
        },
    },
    
}
</script>